<template>
  <div class="modal">
    <el-dialog
      v-model="dialogVisible"
      :title="isCreateRef ? '新建用户' : '编辑用户'"
      width="30%"
      center
    >
      <template #default>
        <el-form :model="formData" label-width="80px" size="large">
          <!-- 用户名输入框 -->
          <el-form-item label="用户名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <!-- 真实姓名输入框 -->
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="formData.realname" placeholder="请输入真实姓名"></el-input>
          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item v-if="isCreateRef" label="密码" prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <!-- 手机号输入框 -->
          <el-form-item label="手机号" prop="cellphone">
            <el-input v-model="formData.cellphone" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <!-- 角色下拉列表 -->
          <el-form-item label="选择角色" prop="roleId">
            <el-select v-model="formData.roleId" placeholder="请选择角色">
              <template v-for="option in stateEntireRoles" :key="option.id">
                <el-option :label="option.name" :value="option.id"></el-option>
              </template>
            </el-select>
          </el-form-item>

          <!-- 部门下拉列表 -->
          <el-form-item label="选择部门" prop="departmentId">
            <el-select v-model="formData.departmentId" placeholder="请选择部门">
              <template v-for="option in stateEntireDepartments" :key="option.id">
                <el-option :label="option.name" :value="option.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer position-center">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useMainStore } from '@/store/mian';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/mian/system';

// 暴露的属性
// 表单数据
const formData = reactive<any>({
  name: '',
  realname: '',
  password: '',
  cellphone: '',
  roleId: '',
  departmentId: ''
});

// 获取roles和departments
const mainStore = useMainStore();
const { stateEntireRoles, stateEntireDepartments } = storeToRefs(mainStore);

// 控制弹窗显示与隐藏
const dialogVisible = ref(false);

// 判断是创建还是编辑，控制是否显示密码输入框
const isCreateRef = ref(true);
// 储存编辑用户时传来的数据，因为其中包含id
const editData = ref<any>();

/**
 * @function setModalVisible 设置弹窗显示与隐藏
 * @param value
 * @param isCreate
 * @param data 表格中的行数据
 */
function setModalVisible(value: boolean, isCreate: boolean = true, data?: any) {
  if (!isCreate && data) {
    // 编辑数据
    // 1.让isCreateRef为false，用于点击确认时的操作，也用于控制密码输入框的显示
    isCreateRef.value = false;
    // 2.遍历formData，将data中的数据赋值给formData，因为data中有部分数据是不能编辑的
    for (const key in formData) {
      formData[key] = data[key];
    }
    // 3.将data中的id赋值给editData暂存
    editData.value = data;
  } else {
    // 新建数据，将表单置空
    for (const key in formData) {
      formData[key] = '';
    }
    isCreateRef.value = true;
  }
  dialogVisible.value = value;
  console.log('isCreateRef: ', isCreateRef.value);
}

const systemStore = useSystemStore();
/**
 * @function handleConfirmClick 确认按钮点击事件
 */
async function handleConfirmClick() {
  dialogVisible.value = false;
  if (isCreateRef.value) {
    // 新建用户
    // 1.将能够直接使用的数据解构
    const { name, realname, password } = formData;
    // 2.将特殊的数据转换为数字
    const cellphone = Number(formData.cellphone);
    const roleId = Number(formData.roleId);
    const departmentId = Number(formData.departmentId);
    // 3.发送请求
    await systemStore.actionCreateUser({
      name,
      realname,
      password,
      cellphone,
      roleId,
      departmentId
    });
  } else {
    // 编辑用户
    await systemStore.actionEditUser(editData.value.id, formData);
  }
  await systemStore.actionPostUserList({ offset: 0, size: 10 });
}

defineExpose({
  setModalVisible
});
</script>

<style scoped lang="scss">
.modal {
  .el-form {
    padding-right: 20px;
  }

  .dialog-footer {
    display: flex;
  }

  .position-right {
    justify-content: flex-end;
  }

  .position-center {
    justify-content: center;
  }

  .position-left {
    justify-content: flex-start;
  }
}
</style>
